<template>
    <div class="mi_phone">
        <p class="phone_title">手机</p>
         <product-list></product-list>
        <div class="phone_product">
            <ul class="phone_left">
                <li v-for="(val,key) in productPic">
                    <a href="#"><img :src="val" alt=""></a>
                </li>
            </ul>
            <div class="phone_right">
                <ul>
                    <li class="right_list" v-for="(val,key) in product.data">
                        <!-- {{val}} -->
                        <product-right :product="val"></product-right>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import Product_list from './Product_list';
    import Product_right from './Product_right';
    export default{
        data(){
            return{
                product:{},
                productPic:[
                    '../../assets/img/left1.jpg',
                    '../../assets/img/left2.jpg'
                ]
            }
        },
        methods:{
            sendMsg: function() {
                this.axios.post("/jiang", "type=top&key=123456",).then(res => {
                //console.log(res.data);n
                this.product = res.data;
                //console.log(this.product.data);
                });
            }
        },
        mounted(){
            this.sendMsg(3);
        },
        components:{
            'product-list':Product_list,
            'product-right':Product_right,
        }
    }
</script>
<style scoped>
.mi_phone>.phone_product{
    display: flex;
    background: #f5f5f5;
}
.mi_phone>.phone_title{
    display: inline-block;
    font-size: 22px;
    line-height: 58px;
    color: #333;
}
.phone_right{
    width: 990px;
    height: 305px;
    /* display: flex; */
}
.phone_product .right_list{
    display: inline-block;
    height: 305px;
    width: 225px;
    padding:  0px 0;
    background: #fff;
    margin: 0 0 8px 10px;
    position: relative;
    transition: all .2s linear;
    overflow: hidden;
} 
.phone_product .right_list:hover .evaluate{
    bottom: 0;
}
.phone_product .right_list:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translate3d(0, -2px, 0);
}
.phone_left{
    width: 234px;
    height: 614px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.phone_left img{
    width: 234px;
    height: 300px;
    transition: all .2s linear;
}
.phone_left img:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translate3d(0, -2px, 0);
}
</style>

